<template>
    <div>
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
        >
            <div class="ball" ref="ball" v-show="flag"></div>
        </transition>
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbolist="lunbolist" :isFull="false"></swiper>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{goodsdes.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiage">
						<p class="jg_des">
                            市场价：<span>￥{{goodsdes.market_price}}</span>
                            销售价：<span>￥{{goodsdes.sell_price}}</span>
                        </p>
                        <p class="jg_ball">
                            <span>购买数量：</span><numberBox :max="goodsdes.stock_quantity" @postnum="getpostnum"></numberBox>
                        </p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="appendcar">加入购物车</mt-button>
					</div>
				</div>
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsdes.goods_no}}</p>
						<p>库存情况：{{goodsdes.stock_quantity}}件</p>
						<p>上架时间：{{goodsdes.add_time | timeFil}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button plain type="primary" size="large" @click="goodsDes(id)">图文介绍</mt-button>
                    <mt-button plain type="danger" size="large" @click="goodsComment(id)">商品评论</mt-button>
                </div>
			</div>
    </div>
</template>

<script>
    import numberBox from '../soncomponents/goods_numberBox.vue'
    import swiper from '../soncomponents/swiper.vue'
    import {Toast} from 'mint-ui'
    export default {
        data () {
            return {
                id:this.$route.params.id,
                lunbolist:[],
                goodsdes:{},
                flag:false,
                selectnum:1
            }
        },
        created() {
            this.getlunbolist();
            this.getgoodsdes();
        },
        methods: {
            //轮播图数据
            getlunbolist(){
                this.$http.get('api/getthumimages/'+this.id).then(res=>{
                    if(res.body.status==0){
                        this.lunbolist = res.body.message
                    }else{
                        Toast("请求失败")
                    }
                })
            },
            //商品参数 以及 价格 数据
            getgoodsdes(){
                this.$http.get('api/goods/getinfo/'+this.id).then(res=>{
                    if(res.body.status==0){
                        // console.log(res.body);
                        this.goodsdes = res.body.message[0]
                    }else{
                        Toast("请求失败")
                    }
                })
            },
            //图文介绍
            goodsDes(id){
                this.$router.push({ name: 'goodsdes', params: { id:id }})
            },
            //商品评论
            goodsComment(id){
                this.$router.push({ name: 'goodscomment', params: { id:id }})
            },
            //添加到购物车的逻辑
            appendcar(){
                this.flag = !this.flag
                //点击购物车 存下商品的 id 价格 选中状态 数量 到 全局（vuex store）中
                var goodsinfo = {
                    id:this.id,
                    count:this.selectnum,
                    price:this.goodsdes.sell_price,
                    selected:true
                }
                this.$store.commit('getgoodsinfo',goodsinfo);
            },
            //小球动画
            beforeEnter(el){
                el.style.transform = "translate(0,0)"
            },
            enter(el,done){
                el.offsetWidth;

                var hz = document.getElementById("huizhang").getBoundingClientRect();
                var ball = this.$refs.ball.getBoundingClientRect();

                var x = hz.left - ball.left;
                var y = hz.top - ball.top;

                el.style.transform = `translate(${x}px,${y}px)`;
                el.style.transition = "all 0.8s cubic-bezier(.4,-0.3,1,.68)"
                done()
            },
            afterEnter(el){
                this.flag = !this.flag
            },
            //数字控件 子组件传值
            getpostnum(count){
                this.selectnum = count
                console.log(this.selectnum);
            }
        },
        components: {
            numberBox,
            swiper
        }
    }
</script>

<style lang="scss" scoped>
.mui-card{
    .mui-card-content{
        .jiage{
            position: relative;
            .jg_des{
                color: #000;
                span:nth-child(1){
                    text-decoration: line-through;
                    margin-right: 20px;
                }
                span:nth-child(2){
                    font-size: 18px;
                    color: red;
                }
            }
        }
    }
    .mui-card-footer{
        display: block;
        button{
            margin: 10px 0;
        }
    }
}
.ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    left: 148px;
    top: 382px;
    z-index: 99;
}
</style>